<template>
    <div id="areamain">
        <el-button v-show="!level" style="margin-bottom: 10px;" @click="editAdd()" type="success">添加</el-button>
        <el-button v-show="level" style="margin-bottom: 10px;" @click="back1()" type="success">返回上级</el-button>

        <div style="padding: 10px;background-color: white;height: 500px;">
            <el-table style="margin-top: 10px;width: 800px;" border :data="areaList" height="400">
                <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
                <el-table-column prop="code" label="代码"></el-table-column>
                <el-table-column label="名称">
                    <template #default="scope">
                        <div @click="getChild(scope.row)" style="cursor: pointer;">
                            {{ scope.row.name }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="parent_code" label="上级区划代码"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <div v-show="parentcode1 == ''">
                            <el-button size="small" title="编辑" style="cursor: pointer;margin-right: 5px;"
                                @click="editarea(scope.row)" :icon="Edit"></el-button>
                            <el-button size="small" title="删除" style="cursor: pointer;margin-right: 5px;"
                                @click="Delarea(scope.row)" :icon="Delete"></el-button>
                            <el-button size="small" title="区划转移" v-show="usergrade != 1" style="cursor: pointer;"
                                @click="Transarea(scope.row)" :icon="Switch"></el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
        </div>

        <el-dialog v-model="editorShow" :title="editorTitle" width="500">
            <el-form :model="editorObj" label-width="auto">
                <el-form-item label="区划代码">
                    <el-input v-model="editorObj.code" />
                </el-form-item>
                <el-form-item label="区划名称">
                    <el-input v-model="editorObj.name" />
                </el-form-item>
                <el-form-item label="上级区划代码">
                    <el-input v-model="editorObj.parent_code" :disabled="true" />
                </el-form-item>
                <el-form-item label="级别">
                    <el-input v-model="editorObj.areaLevel" :disabled="true" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editorShow = false">
                        取消
                    </el-button>
                    <el-button type="primary" @click="sureedit()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="mapshow" width="1100">
            <img class="logoimg" src="/img/jcdsj_logo.png" alt="">
            <div ref="mapcharts" id="mapcharts"></div>
        </el-dialog>
        <el-dialog title="区划转移" v-model="TransShow" width="500">
            <el-form label-width="auto">
                <el-form-item label="隶属地市">
                    <el-select v-model="shivalue" placeholder="请选择" style="width: 240px" @change="getQH(shivalue, 2)">
                        <el-option v-for="item in shiList" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="隶属县区">
                    <el-select v-model="quvalue" placeholder="请选择" style="width: 240px">
                        <el-option v-for="item in qulist" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="transfer()">
                    确定
                </el-button>
                <el-button @click="TransShow = false;">
                    取消
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import {
    Delete,
    Edit,
    Switch
} from '@element-plus/icons-vue'
import pagination from "../../components/pagination.vue";
import * as echarts from 'echarts';
import $sys from "../../api/sys";
const usergrade = ref(localStorage.getItem("grade"));
const mapshow = ref(false);
const mapcharts = ref();
const page = reactive({
    pagenum: 1,
    pagesize: 10,
    total: 0
});

onMounted(() => {
    getarealist();
    getQH('', 1);
});
function getChild(e) {
    getarealist(e)
}
const TransShow = ref(false);
const curcode = ref('');
function Transarea(e) {
    curcode.value = e.code;
    TransShow.value = true;
}
const shivalue = ref('');
const shiList = ref([]);
const quvalue = ref('');
const qulist = ref([]);
const whvalue = ref('');
const whlist = ref([]);
function getQH(code, level) {
    let obj = {};
    obj.code = code;
    $sys.getQHlist(obj).then(res => {
        if (res.code == 200) {
            if (level == 1) {
                shiList.value = res.data;
            } else if (level == 2) {
                quvalue.value = '';
                qulist.value = res.data;
            }
        }
    });
}
function transfer() {
    if (shivalue.value == '') {
        ElMessage({
            message: '请选择市区!',
            type: 'warning'
        });
    } else if (quvalue.value == '') {
        ElMessage({
            message: '请选择县区!',
            type: 'warning'
        });
    } else {
        let obj = {};
        obj.ad_code = curcode.value;
        obj.target_ad_code = quvalue.value;
        $sys.TranserQH(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功,前往转移申请页面查看!',
                    type: 'success'
                });
                TransShow.value = false;
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
                TransShow.value = false;
            }
        });
    }
}
const ncode = ref("");
function viewmap(e) {
    mapshow.value = true;
    ncode.value = e.code;
    let obj = {};
    obj.ad_code = e.code;
    getmapdata();
    $sys.getGeomData(obj).then(res => {
        if (res.code == 200) {
            let obj = {};
            obj.type = res.type;
            obj.features = res.features;
            initmap(res.data, e.name);
        }
    });
}
const d_data = ref([]);
function getmapdata() {
    let obj = {};
    obj.ad_code = ncode.value;
    $sys.HisYearRkData(obj).then(res => {
        if (res.code == 200) {
            d_data.value = res.data;
        }
    });
}
function initmap(mapdata, name) {
    var myChart = echarts.init(mapcharts.value);
    mapdata.features.forEach((item, inde) => {
        item.properties.name = item.properties.ad_name;
    });
    echarts.registerMap(name, mapdata, {

    });
    var option = {
        tooltip: {
            trigger: 'item',
        },
        visualMap: {
            show: true,
            textStyle: { color: '#fff' },
            x: 'left',
            y: 'center',
            splitList: [
                { start: 14, end: 30 }, { start: 12, end: 14 },
                { start: 10, end: 12 }, { start: 8, end: 10 },
                { start: 6, end: 8 }, { start: 0, end: 6 },
            ],
            color: ['#FF3300', '#FF9900', '#FFB09D', '#ffff00', '#00CC00', '#7FFF00']
        },
        toolbox: {
            show: false,
            left: 'left',
            top: 'top',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: '查看',
                type: 'map',
                roam: true,
                map: name,
                emphasis: {
                    label: {
                        show: true,
                    }
                },
                data: d_data.value
            }
        ]
    };
    myChart.setOption(option);
}
const areaList = ref([]);
const level = ref(false);
const parentcode1 = ref('');
const parentcode2 = ref('');
const parentcode3 = ref('');
const parentcode4 = ref('');
const dep = ref(0);
function getarealist(data) {
    if (data && data.grade != 6) {
        level.value = true;
        page.parentCode = data.code;
        if (parentcode1.value == '') {
            parentcode1.value = data.code;
        } else if (parentcode2.value == '') {
            parentcode2.value = data.code;
        } else if (parentcode3.value == '') {
            parentcode3.value = data.code;
        } else if (parentcode4.value == '') {
            parentcode4.value = data.code;
        }
    } else {
        page.parentCode = localStorage.getItem('code');
    }
    if (data && data.grade == 6) {
        ElMessage({
            message: '当前区划已为基础区划!',
            type: 'success'
        })
    } else {
        $sys.getAreaList(page).then(res => {
            if (res.code == 200) {
                dep.value++;
                res.data.result.forEach((item, index) => {
                    if (item.name == '市辖区') {
                        res.data.result.splice(index, 1);
                    }
                })
                page.total = Number(res.data.count) - 1;
                areaList.value = res.data.result;
            }
        });
    }
}

function back1() {
    if (dep.value == 4) {
        page.parentCode = parentcode2.value;
    } else if (dep.value == 3) {
        parentcode2.value = '';
        page.parentCode = parentcode1.value;
    } else if (dep.value == 2) {
        parentcode1.value = '';
        page.parentCode = localStorage.getItem('code');
        level.value = false;
    }
    $sys.getAreaList(page).then(res => {
        if (res.code == 200) {
            dep.value--;
            page.total = Number(res.data.count);
            areaList.value = res.data.result;
        }
    });
}
function getsize(e) {
    page.pagesize = Number(e);
    getarealist();
}
function getpage(e) {
    page.pagenum = Number(e);
    getarealist();
}
//重置为HNrk@1234
const chooseCode = ref('');
function resetPWD(e) {
    chooseCode.value = e.code;
    ElMessageBox.confirm(
        '确定重置该行政区划密码吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.resetPWD(chooseCode.value).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                });
                getarealist();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    }).catch(() => {

    });
}
function Delarea(e) {
    chooseCode.value = e.code;
    ElMessageBox.confirm(
        '确定删除该行政区划吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.delAreaInfo(chooseCode.value).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success'
                });
                getarealist();
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                });
            }
        });
    }).catch(() => {

    });
}
const editorShow = ref(false);
const editorTitle = ref('');
const editorObj = ref({});
function editarea(e) {
    for (let key in editorObj.value) {
        editorObj.value[key] = '';
    }
    editorTitle.value = '编辑';
    editorShow.value = true;
    editorObj.value = JSON.parse(JSON.stringify(e));
    if (editorObj.value.grade == 1) {
        editorObj.value.areaLevel = '省级'
    } else if (editorObj.value.grade == 2) {
        editorObj.value.areaLevel = '市级'
    } else if (editorObj.value.grade == 3) {
        editorObj.value.areaLevel = '区县'
    } else if (editorObj.value.grade == 4) {
        editorObj.value.areaLevel = '乡镇、街道'
    } else if (editorObj.value.grade == 6) {
        editorObj.value.areaLevel = '村、社区'
    }
}
function editAdd() {
    for (let key in editorObj.value) {
        editorObj.value[key] = '';
    }
    editorTitle.value = '添加';
    editorShow.value = true;
    editorObj.value.parent_code = localStorage.getItem('code');

    if (Number(localStorage.getItem('grade')) == 4) {
        editorObj.value.grade = Number(localStorage.getItem('grade')) + 2;
    } else {
        editorObj.value.grade = Number(localStorage.getItem('grade')) + 1;
    }
    if (editorObj.value.grade == 1) {
        editorObj.value.areaLevel = '省级'
    } else if (editorObj.value.grade == 2) {
        editorObj.value.areaLevel = '市级'
    } else if (editorObj.value.grade == 3) {
        editorObj.value.areaLevel = '区县'
    } else if (editorObj.value.grade == 4) {
        editorObj.value.areaLevel = '乡镇、街道'
    } else if (editorObj.value.grade == 6) {
        editorObj.value.areaLevel = '村、社区'
    }
}
function sureedit() {
    if (checkForm()) {
        if (editorTitle.value == '编辑') {
            updatearea();
        } else if (editorTitle.value == '添加') {
            addArea();
        }
    }
}
function updatearea() {
    $sys.updateAreaInfo(editorObj.value).then(res => {
        if (res.code == 200) {
            editorShow.value = false;
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            getarealist();
        } else {
            ElMessage({
                message: res.message,
                type: 'warning'
            });
        }
    });
}
function addArea() {
    $sys.addAreaInfo(editorObj.value).then(res => {
        if (res.code == 200) {
            editorShow.value = false;
            ElMessage({
                message: '操作成功!',
                type: 'success'
            });
            getarealist();
        } else {
            ElMessage({
                message: res.message,
                type: 'warning'
            });
        }
    });
}
function checkForm() {
    let flag = false;
    if (editorObj.value.code == '' || !editorObj.value.code) {
        ElMessage({
            message: '请输入区划代码！',
            type: 'warning'
        });
        flag = false;
    } else if (editorObj.value.name == '' || !editorObj.value.name) {
        ElMessage({
            message: '请输入区划名称！',
            type: 'warning'
        });
        flag = false;
    } else {
        flag = true;
    }
    return flag;
}
</script>

<style lang="less">
.el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;
}

.el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: 0px 1px 3px #071e4a inset;
    border-radius: 6px;
    background-color: #071e4a;
}

.el-table__body-wrapper::-webkit-scrollbar-thumb {
    box-shadow: 0px 1px 3px #00a0e9 inset;
    border-radius: 10px;
    background-color: #00a0e9;
}

.el-table th.gutter {
    display: none;
    width: 0
}

.el-table__body {
    width: 100% !important;
}

.el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

#areamain {
    padding: 20px;

    #mapcharts {
        margin: 0 auto;
        height: 500px;
        background: url('../img/ksh41.png') no-repeat;
        background-size: 100% 100%;
        background-color: #061436;
        position: relative;

        .logoimg {
            position: absolute;
            left: 50%;
            top: 10px;
            transform: translate(-50%, 0);
            z-index: 10000;
        }
    }
}
</style>
